.screen-phone-detail-modal {
	.ant-modal-body {
		padding: 0;
		background: #f8f8f8;
	}
	.ant-modal-close-icon {
		color: #fff;
	}
	.ant-modal-close-x {
		width: 44px;
		height: 44px;
		line-height: 44px;
	}
	.screen-phone-container {
		height: 720px;
		display: flex;
		overflow: hidden;
		align-items: stretch;
		.canvas-box {
			width: 405px;
		}
		.info-box {
			flex: 1;
			box-sizing: border-box;
			.info-header {
				background: #000;
				box-sizing: border-box;
				padding: 10px;
				display: flex;
				align-items: center;
				font-size: 15px;
				font-weight: 600;
				color: #fff;
				box-sizing: border-box;
				padding-right: 50px;
				.num {
					flex: 1;
					min-width: 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.nickname {
					flex: 1;
				}
			}
		}
		.status-box {
			padding: 20px 0 10px 0;
			display: flex;
			flex-flow: column;
			align-items: center;
			.warn {
				color: red;
			}
			.success {
				color: rgb(0, 196, 0);
			}
			.unlogin {
				color: orange;
			}
			.phone-status {
				font-size: 80px;
			}
			.status-text {
				font-size: 16px;
				font-weight: 600;
				padding: 10px 0;
			}
			.status-case {
				font-size: 12px;
				color: #a4a4a4;
			}
		}
	}
	.ctrl-item {
		background: #fff;
		box-shadow: 0 0 3px #ccc;
		margin-top: 10px;
		box-sizing: border-box;
		.title {
			font-size: 14px;
			padding: 5px 10px;
			display: flex;
			align-items: center;
			.title-t {
				flex: 1;
			}
			.sync {
				font-size: 18px;
				cursor: pointer;
			}
		}
		.content {
			padding: 10px 0;
		}
		.detail-item .detail-item-name {
			text-align: right;
		}
	}
	.phone-footer {
		display: flex;
		.footer-item {
			padding: 5px;
			flex: 1;
			text-align: center;
			cursor: pointer;
			background: #fff;
			transition: all 0.3s linear;
			&:hover {
				background: #ccc;
			}
		}
	}
	.init-box {
		box-sizing: border-box;
		padding: 10px;
		flex: 1;
		background: #fff;
		.init-header {
			display: flex;
			align-items: center;
			.text {
				flex: 1;
				font-size: 14px;
				font-weight: 600;
			}
			.btn {
				margin-left: 10px;
				font-size: 12px;
			}
		}
		.init-item {
			margin-top: 10px;
			background: #f8f8f8;
			box-sizing: border-box;
			padding: 10px;
			.item-title {
				font-size: 14px;
				font-weight: 600;
			}
		}
		.item {
			padding: 3px 0 3px 3px;
			display: flex;
			font-size: 10px;
			.t {
				flex: 1;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.state {
				margin-left: 10px;
				&.wait {
					color: #a4a4a4;
				}
				&.act {
					color: #00cc00;
				}
				&.error {
					color: red;
				}
			}
		}
		.init-btn {
			font-size: 12px;
		}
	}
	.init-before-container {
		padding: 10px 20px 20px 20px;
		.title {
			font-size: 20px;
			font-weight: 600;
			margin-bottom: 10px;
		}
		.img-box {
			margin: 5px 0;
			box-sizing: border-box;
			padding-left: 10px;
			img {
				width: 40%;
				margin: 0 10px;
			}
		}
		.btn-box {
			text-align: center;
			padding-top: 20px;
			.btn {
				margin: 0 10px;
			}
		}
	}
}
